<template>
<view class="body" :style="{minHeight:height+'px'}">
  <view class="imgBox">
    <image :src="customerImage" />
    <view class="edit flex a-item j-content" @click="editCustomer">编辑</view>
  </view>
  <view class="content">
    <view class="customerName">
      {{ customer.name }}
    </view>
    <view class="box flex flex-row">
      <view class="fl1 flex j-content flex-column">
        <view class="flex j-content downOrderDate">{{ record.bfsj || '' }}</view>
        <view  class="flex j-content downOrderWord">上次拜访时间</view>
      </view>
      <view class="fl1 flex j-content flex-column">
        <view class="flex j-content downOrderDate">{{ record.xdsj  || '' }}</view>
        <view  class="flex j-content downOrderWord">上次下单时间</view>
      </view>
    </view>
    <view class="box flex flex-row">
      <view class="fl1 flex j-content flex-column">
        <view class="flex j-content downOrderDate">￥{{ record.qkje || 0  }}</view>
        <view  class="flex j-content downOrderWord">共计欠款</view>
      </view>
      <view class="fl1 flex j-content flex-column">
        <view class="flex j-content downOrderDate">{{ record.totalOrders || 0  }}</view>
        <view  class="flex j-content downOrderWord">共计单据数</view>
      </view>
    </view>
    <view class="box flex flex-column">
      <view class="flex flex-row">
        <view class="label flex ">联系人</view>
        <view  class="flex downOrderWord">{{ record.lxr }}</view>
      </view>
      <view class="flex  flex-row">
        <view class="label flex  ">客户地址</view>
        <view  class="flex downOrderWord">{{ record.khdz }}</view>
      </view>
      <view class="flex  flex-row">
        <view class="label flex  ">送货地址</view>
        <view  class="flex  downOrderWord">{{ record.shdz }}</view>
      </view>
    </view>

    <view  class="box flex flex-column">
      <view class="row flex flex-row">
        <view @tap="photo" class="fl1 flex flex-column a-item j-content" >
          <view class="icon photo">
            <image  src="http://121.41.75.32:8002/file/static/photo.png" mode="heightFix"  />
          </view>
          <view class="iconText">拍照</view>
        </view>
        <view  @tap="deliveryShopping(1)" class="fl1 flex flex-column a-item j-content">
          <image  class="imageIcon" src="http://121.41.75.32:8002/file/static/requirement.png" mode="heightFix"  />
          <view class="iconText">要货</view>
        </view>
        <view  @tap="deliveryShopping(2)" class="fl1 flex flex-column a-item j-content">
          <view class="icon return">
            <image  src="http://121.41.75.32:8002/file/static/return.png" mode="heightFix"  />
          </view>
          <view class="iconText">退货</view>
        </view>
      </view>
      <view class="row flex flex-row" @tap="queryOrder">
        <view  @tap="orderquery" class="fl1 flex flex-column a-item j-content">
          <image  class="imageIcon" src="http://121.41.75.32:8002/file/static/query.png" mode="heightFix"  />
          <view class="iconText" >单据查询</view>
        </view>
        <view class="fl1 flex flex-column a-item j-content"  @tap="debtList">
          <view class="icon debt">
            <image  src="http://121.41.75.32:8002/file/static/debt.png" mode="heightFix"  />
          </view>
          <view class="iconText">欠款</view>
        </view>
        <view class="fl1 flex flex-column a-item j-content" @tap="pay">
          <view class="icon payment">
            <image  src="http://121.41.75.32:8002/file/static/payment.png" mode="heightFix"  />
          </view>
          <view class="iconText">交款</view>
        </view>
      </view>
      <view class="row flex flex-row" style="width:33%">
        <view @tap="deliveryShopping(3)" class="fl1 flex flex-column a-item j-content">
          <view class="icon return">
            <image  src="http://121.41.75.32:8002/file/static/return.png" mode="heightFix"  />
          </view>
          <view class="iconText">库存记录</view>
        </view>
    </view>
    </view>

    <view style="width: 100%;height: 200rpx"></view>
  </view>

  <!-- <bottom-Box>
    <view>
      <button class="signIn" v-if="customer.visited !== 1" @tap="jump('/pageDelivery/signIn/index')">签到</button>
      <button class="signIn" v-else @tap="signOut">签退</button>
    </view>
  </bottom-Box> -->
</view>
</template>

<script>
import bottomBox from "../components/bottomBox";
import {getScreen} from "../../service/auth";
import {getLastVisitRecord, signOutByCustomerId} from "../../service/api/delivery";
export default {
  name: "detail",
  components:{bottomBox},
  data(){
    return{
      height:700,
      customerId:0,
      record:{

      },
      customer:{
      },
      customerImage:'http://121.41.75.32:8002/file/static/6f627c7ced39fb3f28440147bd0008f8.jpeg'

    }
  },
  onLoad(option) {
    this.customerId = option.customdeId
    const app = getApp()
    this.customer = app.globalData.customer
    try{
      this.customerImage = JSON.parse(this.customer.imageUrl)[0].path
    }catch (e) {
    }
    this.onGet()

  },
  created() {
    const screen = getScreen()
    this.height = screen.height
  },
  methods:{
    onGet(){
      console.log('发送请求')
      getLastVisitRecord(this.customerId).then(res=>{
        this.record = res.data
      })
    },
    queryOrder(){
      uni.navigateTo({url:'/pages/mine/order/index?customerId='+this.customerId})
    },
    orderquery(){
      console.log('单据查询')
      uni.navigateTo({url:'/order/query/index?customerId='+this.customerId})
    },
    debtList(){
      uni.navigateTo({url:'/order/debtList/index?customerId='+this.customerId})
    },
    pay(){
      uni.navigateTo({url:'/order/pay/index?customerId='+this.customerId})
    },
    deliveryShopping(type){
      const app = getApp()
      app.globalData.selectedPosition = this.customer
      uni.navigateTo({url:`/pageShopping/home/index?type=${type}`})
    },
    jump(url){
      uni.navigateTo({url:url})
    },
    photo(){
      uni.navigateTo({url:`/order/visitor/index?customerId=${this.customerId}`})
    },
    signOut(){
      const data ={
        customerId:this.customerId
      }
      signOutByCustomerId(data).then(res=>{
        if (res.status === 200){
          this.customer.visited = 0
          uni.showToast({title:'签退成功',icon:'none'})
        }else {a
          uni.showToast({title:res.msg,icon:'none'})
        }
      })
    },
    editCustomer(){
      uni.navigateTo({url:`/pages/saleplace/index?updateId=${this.customerId}`})
    }
  }
}
</script>

<style lang="scss" scoped>
.body{
  background: #F6F6F6;
  position: relative;
  overflow: hidden;
  .imgBox{
    width: 100%;
    height: 328rpx;
    position: relative;
    z-index:0;
    .edit{
      width: 100rpx;
      height: 50rpx;
      background: #ffffff;
      border-radius: 10rpx;
      position: absolute;
      top:50rpx;
      right: 50rpx;
      z-index: 99;
    }
  }
  .content{
    margin-top: -150rpx;
    padding: 0 5%;
    z-index: 999;
    position: relative;
    .customerName{
      width: 416rpx;
      height: 45rpx;
      font-size: 45rpx;
      font-weight: 500;
      color: #FFFFFF;
      line-height: 38rpx;
      -webkit-background-clip: text;
      padding-bottom: 30px;
    }
  }
}
.box{
  border-radius: 20rpx;
  width: 100%;
  background: #ffffff;
  padding: 30rpx;
  margin-bottom: 30rpx;
}
.downOrderDate{
  height: 80rpx;
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  line-height: 38rpx;
  text-align: center
}
.downOrderWord{
  font-size: 32rpx;
  font-weight: 400;
  color: #666666;
}
.signIn{
  width: 90%;
  background: #007aff;
  border-radius: 90rpx;
  margin: 10rpx 5%;
  color: #FDFEFF;
}
.label{
  width: 30%;
  font-weight: 400;
  font-size: 32rpx;
  color:  #333333
}
.icon{
  width: 70rpx;
  height: 70rpx;
  border-radius: 70rpx;
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
  image{
    width: 50rpx;
    height: 50rpx;
  }
}
.imageIcon{
  width: 70rpx;
  height: 70rpx;
}
.photo{
  background:linear-gradient(#FF7575,#E43333);
}
.return{
  background:linear-gradient(#FF6C20,#FF5036);
}
.debt{
  background:linear-gradient(#53C0FF,#22AEFF);
}
.payment{
  background:linear-gradient(#1CD37B,#17C270);
}
.iconText{
  font-weight: 500;
  font-size: 32rpx;
}
.row{
  height: 180rpx;
}
</style>
